<template>
  <div class="app-container">
    <el-card>
      <!-- 顶部按钮栏 start -->
      <div class="btn-box flex justify-between mb-20">
        <div class="flex align-center">
          <el-input
            v-model="keyWords"
            placeholder="请输入分类名称进行搜索"
            class="mr-5"
            clearable
            @clear="search"
          ></el-input>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
        <el-button type="primary" @click="toAddClassify">新建分类</el-button>
      </div>
      <!-- 顶部按钮栏 end -->

      <!-- 表头 -->
      <ClassifyTableHead />
      <ClassifyTableItem
        v-for="item in classifyList"
        :key="item.id"
        :info="item"
        @changeShowChild="doChangeShow"
        @changeShowTwoChild="doTwoChangeShow"
        @changeOpenStatus="doChangeOpenStatus"
        @changeIsRecommend="doChangeIsRecommend"
        @editClassify="doEditClassify"
        @deleteClassify="doCeleteClassify"
      />
      <el-empty v-show="!classifyList.length" description="暂无分类"></el-empty>
    </el-card>
  </div>
</template>

<script>
import ClassifyTableHead from './components/ClassifyTableHead.vue'
import ClassifyTableItem from './components/ClassifyTableItem.vue'
export default {
  name: 'GoodsClassify',
  components: {
    // 表头
    ClassifyTableHead,
    // 表格项
    ClassifyTableItem
  },
  props: {},
  data() {
    return {
      // 搜索关键词
      keyWords: '',

      // 分类列表
      classifyList: [],

      // 展开数组id
      showChildId: '',
      showTwoChildId: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    // 获取商品分类列表
    this.getGoodsClassifyList()
  },
  activated() {
    this.getGoodsClassifyList()
  },
  mounted() {},
  methods: {
    // 获取商品分类列表
    async getGoodsClassifyList() {
      try {
        const { data } = await this.$http.goods.classify.list({ params: { name: this.keyWords } })
        this.classifyList = this.deepChangePlatForm(
          data?.map(el => {
            const newEl = this.$lodash.cloneDeep(el)
            if (newEl.id === this.showChildId) {
              newEl.showChild = true
            } else {
              newEl.showChild = false
            }
            newEl.childList = newEl.childList?.map(item => {
              const twoNewEl = this.$lodash.cloneDeep(item)
              if (twoNewEl.id === this.showTwoChildId) {
                twoNewEl.showChild = true
              } else {
                twoNewEl.showChild = false
              }
              return twoNewEl
            })
            return newEl
          })
        )
        console.log(this.classifyList)
        // console.log(arr)
      } catch (error) {
        console.log('getGgetGoodsClassifyListoodsList', error)
      }
    },

    /**
     * 递归转化platfrom为数组
     * @param {Array} arr 处理数组
    //  */
    deepChangePlatForm(arr) {
      const newArr = arr.map(el => {
        const newEl = this.$lodash.cloneDeep(el)
        newEl.platform = newEl.platform ? newEl.platform.split(',') : []
        if (newEl.childList && newEl.childList.length) {
          newEl.childList = this.deepChangePlatForm(newEl.childList)
        }
        return newEl
      })
      return newArr
    },

    // 点击搜索
    search() {
      this.getGoodsClassifyList()
    },

    // 跳转至新增/编辑分类页面
    toAddClassify() {
      this.$router.push({ name: 'AddClassify' })
    },

    /**
     * 列表展示隐藏操作
     * @param {String} id 一级分类id
     */
    doChangeShow(id) {
      this.classifyList = this.classifyList.map(el => {
        const newEl = this.$lodash.cloneDeep(el)
        if (newEl.id === id) {
          this.showChildId = this.showChildId === id ? '' : id
          newEl.showChild = newEl.showChild ? false : true
        } else {
          newEl.showChild = false
        }
        return newEl
      })
    },

    /**
     * 三级展示隐藏操作
     */
    doTwoChangeShow(id) {
      this.classifyList = this.classifyList.map(el => {
        const newEl = this.$lodash.cloneDeep(el)
        newEl.childList = newEl.childList.map(item => {
          const newTwoEl = this.$lodash.cloneDeep(item)
          if (newTwoEl.id === id) {
            this.showTwoChildId = this.showTwoChildId === id ? '' : id
            newTwoEl.showChild = newTwoEl.showChild ? false : true
          } else {
            newTwoEl.showChild = false
          }
          return newTwoEl
        })
        return newEl
      })
    },

    /**
     * 开启平台状态切换
     * @param {Object} item 分类数据
     */
    doChangeOpenStatus(item, value) {
      // 是否启用
      const isOpen = item.platform.includes(value) ? true : false
      const message = isOpen ? '已隐藏' : '已启用'
      // 参数处理
      let enablePlatform = []
      if (isOpen) {
        enablePlatform = item.platform.filter(el => el !== value).join(',')
      } else {
        enablePlatform = [...item.platform, value].join(',')
      }
      this.$http.goods.classify
        .enablePlatform({ id: item.id, platform: enablePlatform })
        .then(res => {
          if (res.status === 200) {
            this.getGoodsClassifyList()
            this.$message.success(message)
          }
        })
        .catch(err => {
          console.log('doChangeOpenStatus', err)
        })
    },

    /**
     * 切换分类推荐状态
     * @param {Object} item 分类数据
     */
    doChangeIsRecommend(item, key) {
      console.log('key', key)
      const obj = {
        // 推荐首页
        IsRecommend: this.$http.goods.classify.recommend,

        // 品牌
        ZoneBrand: this.$http.goods.classify.zoneBrand,

        // 每日上新
        ZoneDayNew: this.$http.goods.classify.zoneDayNew,

        // 发现好物
        ZoneFineGoods: this.$http.goods.classify.zoneFineGoods,

        // 因季推荐
        ZoneSeasonal: this.$http.goods.classify.zoneSeasonal
      }

      const value = obj[key]
      console.log('value', value)
      value(
        key == 'IsRecommend' ? item.id : { id: item.id },
        key == 'IsRecommend' ? !item.isRecommend : null
      )
        .then(res => {
          if (res.status === 200) {
            const tip = item.isRecommend ? '已取消推荐' : '已推荐'
            this.getGoodsClassifyList()
            this.$message.success(tip)
          }
        })
        .catch(err => {
          console.log('doChangeIsRecommend', err)
        })
    },

    /**
     * 编辑分类信息
     * @param {Object} item 分类数据
     */
    doEditClassify({ id }) {
      this.$router.push({ name: 'EditClassify', query: { id } })
    },

    /**
     * 删除分类
     * @param {Object} item 分类数据
     */
    doCeleteClassify(item) {
      // 发送请求
      this.$http.goods.classify
        .delete(item.id)
        .then(res => {
          if (res.status === 200) {
            this.getGoodsClassifyList()
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('doCeleteClassify', err)
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>
